<!-- APP历史版本 -->
<template>
  <div class="content">
    <!-- 筛选栏 -->
    <search-form
      ref="searchForm"
      :dataFilterShow="false"
    >
      <div slot="tool">
        <el-button type="primary" @click="upDateVersion(1, {})">添加</el-button>
      </div>
    </search-form>

    <!-- 列表栏 -->
    <filter-table
      :tableData="dataList.records"
      :pageData="dataList"
      @pageChange="pageChange"
      :loading="loading"
      ref="refFilterTable"
    >
      <template slot="table">
        <el-table-column prop="version" label="新版本名"></el-table-column>
        <el-table-column label="渠道" width="165">
           <template slot-scope="scope">
              <span>{{ formdataChannel(scope.row) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updateTime" label="上传时间"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="{row}">
            <el-button type="text" @click="upDateVersion(2, row)">更新</el-button>
            <el-button type="text" @click="upDateRemark(row)">备注</el-button>
          </template>
        </el-table-column>
      </template>
    </filter-table>
    <!-- 新增编辑版本 -->
    <update-version ref="updateDeptDialog"
      :isAdd="isAdd"
      :detailData="roleData"
      :androidOptions="androidOptions"
      :iosOptions="iosOptions"
      :addEditVisible="addEditVisible">
    </update-version>
    <!-- 备注 -->
    <update-remark ref="remarkDialog"
      :detailData="remarkData"
      :remarkVisible="remarkVisible">
    </update-remark>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SearchForm from '@/components/searchForm/searchTable'
import FilterTable from '@/components/filterTable/index'
import UpdateVersion from './components/updateVersion'
import UpdateRemark from './components/updateRemark'
import { versionList, getdictlist } from '@/api/rightsManage'
export default {
  name: 'appLatestVersion',
  components: { SearchForm, FilterTable , UpdateVersion, UpdateRemark },
  computed: {
    ...mapGetters(['name', 'userInfo'])
  },
  data() {
    return {
      loading: false,
      addEditVisible: false,
      remarkVisible: false,
      isAdd: 1,
      roleData: {},
      remarkData: {},
      dataList: [],
      pagination: {
        page: 1,
        // total: null,
        limit: 20
      },
      androidOptions: [],
      iosOptions: []
    }
  },
  created() {
  },
  mounted() {
    this.getDataList();
    this.getDict();
  },
  methods: {
    // 获取列表数据
    getDataList() {
      this.loading = true
      versionList(
        Object.assign(
          {},
          this.pagination
        )
      ).then(res => {
        this.loading = false
        this.dataList = res.data
      })
    },
    getDict() {
      getdictlist(
        {
          type: 'android_channel_options'
        }
      ).then(res => {
        this.androidOptions = JSON.parse(res.data[0].value);
      })
      getdictlist(
        {
          type: 'ios_channel_options'
        }
      ).then(res => {
        this.iosOptions = JSON.parse(res.data[0].value);
      })
    },
    // 新增编辑角色
    upDateVersion(type, item) {
      this.isAdd = type
      this.roleData = Object.assign({}, item)
      this.$refs.updateDeptDialog.addEditVisible = true
    },
    upDateRemark(item) {
      this.remarkData = Object.assign({}, item)
      this.$refs.remarkDialog.remarkVisible = true
    },
    // 删除角色
    delRole(roleId){
      this.$confirm('确认删除角色?',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeRole({roleId:roleId}).then(res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getDataList();
          });
        }).catch(() => {})
    },
    // 分页联动
    pageChange(pagedata) {
      setTimeout(() => {
        this.pagination = pagedata
      }, 1)
    },
    formdataChannel(row) {
      let options = row.phoneType === 1 ? this.androidOptions : this.iosOptions;
      let channel = options.filter(item => {
        return item.value === row.channel
      });
      let phoneType = row.phoneType === 1 ? 'Android' : 'IOS'
      return `${phoneType}-${channel.length > 0 ? channel[0].name : ''}`;
    }
  },
  watch: {
    pagination: {
      deep: true,
      handler(now, old) {
        this.getDataList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.filterForm{
  display: flex;
  flex-direction: row;
}
.el-form-item{
    margin-bottom: 0!important;
  }
</style>

